<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18" :offset="2">
        <el-card v-if="item" :body-style="{ padding: '0px' }">
          <div slot="header">
            <span class="title">{{ item.title }}</span>
            <time class="time">发布日期：{{ item.date }}</time>
          </div>
          <div class="content">
            <img :src="item.pic_url" class="image">
            <div class="info">
              <div v-if="item.tags.length > 0">
                <el-tag style="margin-right:10px;margin-top:10px;" v-for="(tag,index) in item.tags" :key="index">
                  {{ tag }}
                </el-tag>
              </div>
              <div style="margin-top:35px;" v-else>
                <el-tag>
                  暂无标签
                </el-tag>
              </div>
              <div style="margin-top:25px;">
                <el-tag style="margin-right:10px;" type="info">消耗时间:{{ item.cost_time }}分钟</el-tag>
                <el-tag type="info">准备时间:{{ item.ready_time }}分钟</el-tag>
              </div>
              <div style="margin-top:25px;">
                <span class="title">原材料：</span>
                <span v-for=" material in  item.materials" :key="material.text">
                  <img width="30" height="30" :src="material.pic" alt="">
                  <span style="font-size:0.8rem;">{{ material.text }}</span>
                </span>
              </div>
              <div class="detail">
                <el-badge class="badge" :value="item.order">
                  <el-button>菜谱</el-button>
                </el-badge>
                <el-badge class="badge" :value="item.fans">
                  <el-button>粉丝数</el-button>
                </el-badge>
                <el-badge class="badge" :value="item.watch">
                  <el-button>关注</el-button>
                </el-badge>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-row :gutter="20">
      <el-col :span="4" :offset="4">
        <el-steps v-if="item" :space="300" direction="vertical" :active="1">
          <el-step v-for="(step,index) in item.steps" :key="index" :title="`第${index+1}步`" :description="step"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="12" :offset="4">
        <div v-if="item">
          <img class="step-image" v-for="(url,index) in item.step_urls" :key="index" :src="url" alt="">
        </div>
      </el-col>
    </el-row> -->
    <el-row :gutter="20">
      <el-col v-if="item" :span="14" :offset="2">
        <el-carousel trigger="click" @change="carouselChanged" :autoplay="false" indicator-position="outside">
          <el-carousel-item v-for="(url,index) in item.step_urls" :key="index">
            <img width="100%" height="100%" :src="url" alt="">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col v-if="item" :span="4" :offset="2">
        <el-slider v-model="timeSlider" :max="item.cost_time" :step="10" show-stops :format-tooltip="formatTooltip" vertical height="300px">
        </el-slider>
      </el-col>

      <el-col v-if="item" :span="24">
        <el-steps :active="activeStep">
          <el-step v-for="(step,index) in item.steps" :key="index" :title="`第${index+1}步`" :description="step"></el-step>
        </el-steps>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  methods: {
    carouselChanged(newVal) {
      // console.log(newVal);
      if (newVal === this.item.steps.length - 1) {
        this.timeSlider = this.item.cost_time;
      } else if (newVal === 0) {
        this.timeSlider = 0;
      } else {
        if (this.item.step_timers.length > 0) {
          this.item.step_timers.forEach(steptimer => {
            if (steptimer.index === newVal && steptimer.timer > 0) {
              // console.log(steptimer.timer);
              this.timeSlider += steptimer.timer;
              this.$notify.info({
                title: '提示',
                message: `当前步骤耗时${steptimer.timer}分钟`
              });
            }
          });
        }
      }
      this.activeStep = newVal + 1;
    },
    formatTooltip(val) {
      return val + '分钟';
    }
  },
  data() {
    return {
      activeStep: 1,
      timeSlider: 0
    };
  },
  computed: {
    ...mapGetters({ item: 'getCurrentCook' })
  },
  created() {
    // if (!this.item) {
    // }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.time {
  font-size: 13px;
  color: #999;
  float: right;
  padding: 3px 0;
}
.title {
  font-weight: bold;
}
.content {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  .info {
    margin: 10px;
    .detail {
      margin-top: 25px;
      .badge {
        margin-right: 50px;
      }
    }
  }
}

.desc {
  width: 100%;
  text-align: center;
}
.image {
  width: 30%;
  height: 300px;
  display: block;
}

.step-image {
  margin-top: 10px;
  height: 290px;
  display: block;
}
</style>
